import * as echarts from "echarts";
function hexToRgb(hex: string) {
  // 去掉可能存在的前缀 #
  hex = hex.replace(/^#/, "");

  // 如果是三位数的十六进制颜色，转换为六位数
  if (hex.length === 3) {
    hex = hex
      .split("")
      .map(function (h) {
        return h + h; // 将每个字符重复一次
      })
      .join("");
  }

  // 解析 R、G、B 值
  const bigint = parseInt(hex, 16);
  const r = (bigint >> 16) & 255; // 取出红色分量
  const g = (bigint >> 8) & 255; // 取出绿色分量
  const b = bigint & 255; // 取出蓝色分量

  return `${r}, ${g}, ${b}`; // 返回 RGB 字符串
}
export function useEchartsMixins(id: string) {
  const colors = ["#00FFCC", "#F5B700", "#fac858"];
  const myEchart: any = ref<any>(null);
  onMounted(() => {
    myEchart.value = markRaw(echarts.init(document.getElementById(id)));
    window.addEventListener("resize", chartResize);
    window.addEventListener("fullscreenchange", chartResize);
  });
  onUnmounted(() => {
    myEchart.value.dispose();
    window.removeEventListener("resize", chartResize);
    window.removeEventListener("fullscreenchange", chartResize);
  });
  const chartResize = () => {
    myEchart.value.resize();
  };
  const setOption = (option: any) => {
    myEchart.value.setOption({
      tooltip: {},
      color: colors,
      ...option,
    });
  };
  class publicOpition {
    static color = colors;
    static colorRgb = colors.map((item) => hexToRgb(item));
    static xAxis(data: any[], options: any = {}) {
      return {
        type: "category",
        data,
        //颜色为白色
        axisLine: {
          lineStyle: {
            color: "rgba(255,255,255,0)",
          },
        },
        // label颜色为白色
        axisLabel: {
          color: "rgba(255,255,255,0.6)",
        },
        // 修改分割线颜色
        axisTick: {
          show: false, // 隐藏刻度线
        },
        ...options,
      };
    }
    static yAxis(options: any = {}) {
      return {
        type: "value",
        //在纵坐标 最上面加个  单位：万m²
        // name: "单位:万m²",
        scale: true,
        splitNumber: 3,
        axisLabel: {
          color: "rgba(255,255,255,0.6)",
          interval: "auto",
        },
        //颜色为白色
        axisLine: {
          lineStyle: {
            color: "rgba(255,255,255,0.6)",
          },
        },
        // 修改分割线颜色
        splitLine: {
          lineStyle: {
            color: "rgba(255,255,255,0.1)", // 将颜色设置为较浅的灰色
          },
        },
        ...options,
      };
    }
    static grid(options: any = {}) {
      return {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
        ...options,
      };
    }
    static dataZoom = [
      {
        type: "slider",
        show: true,
        showDetail: false,
        startValue: 0,
        endValue: 4,
        filterMode: "empty",
        width: "100%",
        height: 7, // 确保滑动区域的高度合适
        left: "center",
        zoomLock: true,
        handleSize: 0, // 将手柄大小设置为0，隐藏手柄
        bottom: 0,
        borderColor: "transparent", // 去除边框颜色，隐藏多余的线
      },
      {
        type: "inside",
        zoomOnMouseWheel: false,
        moveOnMouseMove: true,
        moveOnMouseWheel: true,
      },
    ];
    static seriesLine(data: any[], options: any = {}) {
      return {
        data,
        smooth: true,
        type: "line",
        // 去掉点
        // symbol: "none",
        ...options,
      };
    }
  }
  return {
    myEchart,
    setOption,
    publicOpition,
  };
}
